<template>
  <view class="fen-box">
    <view class="fen-g"></view>
    <!-- 侧导航开始 -->
    <view class="fenb-box">
      <view class="ch">
        <view class="menu">
          <view class="me">
            <view
              class="textt"
              v-for="(item, index) in list"
              :key="index"
              @click="changeCu(index)"
            >
              {{ item.textt }}
            </view>
          </view>
          <view class="me-right">
            <swiper
              vertical="true"
              disable-touch="true"
              :current="curret"
              class="swiper"
            >
              <swiper-item>
                <view
                  class="jshw-box"
                  style="background-color: salmon; height: 100%"
                >
                  推荐分类
                </view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item" style="height: 100%">
                  <view class="foodstuff">
                    <view class="foodstuff-title">休闲食品</view>
                    <view class="foodstuff-bot">
                      <view
                        class="food-list"
                        v-for="(item, index) in food"
                        :key="index"
                      >
                        <image :src="item.image" mode="scaleToFill" />
                        <view class="food-t">{{ item.fote }}</view>
                      </view>
                    </view>
                  </view>
                  <view class="drink">
                    <view class="drink-title">饮料</view>
                    <view class="foodstuff-bot">
                      <view
                        class="food-list"
                        v-for="(item, index) in drink"
                        :key="index"
                      >
                        <image :src="item.image" mode="scaleToFill" />
                        <view class="food-t">{{ item.fote }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >个户清洁</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >美妆护肤</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >母婴童装</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >家居厨具</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >数码家电</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >服饰配饰</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >箱包鞋帽</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >汽车用品</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >图书文娱</view
                >
              </swiper-item>
              <swiper-item>
                <view
                  class="swiper-item"
                  style="background-color: salmon; height: 100%"
                  >玩具乐器</view
                >
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>
    <!-- 侧导航结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      curret: "",
      list: [
        {
          textt: "推荐分类",
        },
        {
          textt: "食品酒饮",
        },
        {
          textt: "个户清洁",
        },
        {
          textt: "美妆护肤",
        },
        {
          textt: "母婴童装",
        },
        {
          textt: "家居厨具",
        },
        {
          textt: "数码家电",
        },
        {
          textt: "服饰配饰",
        },
        {
          textt: "箱包鞋帽",
        },
        {
          textt: "汽车用户",
        },
        {
          textt: "图书文娱",
        },
        {
          textt: "玩具乐器",
        },
      ],
      food: [
        { image: "../../static/食品.png", fote: "零食大礼包" },
        { image: "../../static/食品.png", fote: "休闲零食" },
        { image: "../../static/食品.png", fote: "膨化食品" },
        { image: "../../static/食品.png", fote: "坚果炒货" },
        { image: "../../static/食品.png", fote: "肉干/熟食" },
        { image: "../../static/食品.png", fote: "蜜饯果干" },
        { image: "../../static/食品.png", fote: "巧克力" },
        { image: "../../static/食品.png", fote: "饼干蛋糕" },
      ],
      drink: [
        { image: "../../static/饮料.png", fote: "碳酸饮料" },
        { image: "../../static/饮料.png", fote: "蛋白质饮料" },
        { image: "../../static/饮料.png", fote: "功能饮料" },
        { image: "../../static/饮料.png", fote: "果味饮料" },
        { image: "../../static/饮料.png", fote: "茶饮料" },
        { image: "../../static/饮料.png", fote: "即饮咖啡" },
      ],
    };
  },
  methods: {
    changeCu(index) {
      console.log(index);
      this.curret = index;
    },
  },
};
</script>

<style lang="scss">
.fen-box {
  .fenb-box {
    // height: 100vh;
    .ch {
      width: 100%;
      // height: 100vh;
      margin-bottom: 50px;

      .menu {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .me {
          width: 25%;
          height: 1300rpx;
          background-color: rgba(132, 132, 132, 0.1);
          text-align: center;

          .textt {
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            color: silver;
          }

          .textt:hover {
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            color: red;
            background-color: white;
            font-weight: bolder;
            border-left: 10rpx solid red;
          }
          
        }

        .me-right {
          width: 73%;
          // height: 1000px;
          .swiper {
            height: 100%;
            .swiper-item {
              height: 100%;
              // 休闲食品
              .foodstuff {
                width: 100%;
                .foodstuff-title {
                  font-weight: bolder;
                }
                .foodstuff-bot {
                  width: 100%;
                  display: flex;
                  justify-content: left;
                  flex-wrap: wrap;
                  .food-list {
                    width: 30%;
                    margin: 5rpx;
                    text-align: center;
                    image {
                      width: 100%;
                      height: 180rpx;
                    }
                    .foot-t {
                      width: 100%;
                    }
                  }
                }
              }
              // 饮料
              .drink {
                width: 100%;
                .drink-title {
                  font-weight: bolder;
                }
                .foodstuff-bot {
                  width: 100%;
                  display: flex;
                  justify-content: left;
                  flex-wrap: wrap;
                  .food-list {
                    width: 30%;
                    margin: 5rpx;
                    text-align: center;
                    image {
                      width: 100%;
                      height: 180rpx;
                    }
                    .foot-t {
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
